<template>
  <div style="width: 100%; height: 100%">
    <div style="margin-top: 27px">
      <div v-if="selTab == '基础信息'">
        <basic-info :kqInfoList="kqInfoList" :jcdInfoList="jcdInfoList" :update="updateBasic"></basic-info>
      </div>
      <div v-if="selTab == '事故信息'">
        <accident-info
          :jcEventInfoList="jcEventList"
          :totalLen="totalLen"
          @change-to-page="changePage"
        ></accident-info>
      </div>
      <div v-if="selTab == '历史状态'">
        <his-info
          :selQk="selQk"
          :hisStateList="hisStateList"
          :monthList="monthList"
        ></his-info>
      </div>
      <div v-if="selTab == '检测点信息'">
        <jcd-info :jcdInfoList="jcdInfoList" :totalLen="totalLen"></jcd-info>
      </div>
    </div>
    <div class="flex-row-center-end" style="color: #ffffff; height: 58.4px">
      <div class="flex-row-start-center">
        <router-link
          :to="{ name: 'index', query: { selKq: selQk, showJz: showJz } }"
        >
          <div class="button-style">返回上级</div>
        </router-link>
        <!-- <router-link
          :to="{
            name: 'dataManager',
            query: {
              name: 'overview',
              selType: '库区信息',
              selTab: '库区概览',
              queryTab: selTab,
              selKq: selQk,
              showJz: showJz,
            },
          }"
        >
          <div class="button-style" style="margin-left: 14px">数据管理</div>
        </router-link> -->
        <div class="date-style">{{ systemTime }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import basicInfo from "@/components/overview/kqOverview/basicInfo";
import accidentInfo from "@/components/overview/kqOverview/accidentInfo";
import hisInfo from "@/components/overview/kqOverview/hisInfo";
import jcdInfo from "@/components/overview/kqOverview/jcdInfo";
export default {
  data() {
    return {
      kqInfoList: {},
      jcdInfoList: {},
      jcEventList: [],
      hisStateList: [],
      monthList: [],
      updateBasic: 0,
      totalLen: 0,
      page:0,
      pageSize:10
    };
  },
  props: {
    selTab: String,
    selQk: String,
    queryParam: String,
    showJz: Boolean,
  },
  computed: {
    systemTime() {
      return this.$store.state.systemTime;
    },
  },
  components: {
    basicInfo,
    accidentInfo,
    hisInfo,
    jcdInfo,
  },

  watch: {
    selTab(val) {
      let o = {};
      if (val == "基础信息") {
        this.getQverviewKqInfo();
      } else if (val == "检测点信息") {
        this.getOverviewJcdInfo();
      } else if (val == "事故信息") {
        o.kqName = "";
        o.dealSection = "";
        o.eventType = "";
        o.findTime = "";
        o.jzId = "";
        o.jzName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getOverviewEventInfo(o);
      } else if (val == "历史状态") {
        this.getOverviewHisInfo();
      }
    },
  },
  mounted() {
    this.$nextTick(() => {
      let o = {};
      if (this.selTab == "基础信息") {
        this.getQverviewKqInfo();
        this.getOverviewJcdInfo();
      } else if (this.selTab == "检测点信息") {
        this.getOverviewJcdInfo();
      } else if (this.selTab == "事故信息") {
        o.kqName = "";
        o.dealSection = "";
        o.eventType = "";
        o.findTime = "";
        o.jzId = "";
        o.jzName = "";
        o.page = this.page;
        o.pageSize = this.pageSize;
        this.getOverviewEventInfo(o);
      } else if (this.selTab == "历史状态") {
        this.getOverviewHisInfo();
      }
    });
  },
  methods: {
    changePage(val) {
      
      this.page = val.page;
      val.pageSize = this.pageSize;
      let it = this;
      if (it.selTab == "基础信息") {
        this.getQverviewKqInfo();
      } else if (it.selTab == "检测点信息") {
        this.getOverviewJcdInfo();
      } else if (it.selTab == "事故信息") {
        this.getOverviewEventInfo(val);
      } else if (it.selTab == "历史状态") {
        this.getOverviewHisInfo();
      }
    },
    getOverviewHisInfo() {
      this.$axios({
        url: "/getOverviewHisInfo",
        type: "post",
      }).then((res) => {
        this.monthList = res.data.monthList.reverse();
        this.hisStateList = res.data.kqStateList;
        this.hisStateList.forEach((item) => {
          item.jzStateList = item.jzStateList.reverse();
        });
      });
    },
    getQverviewKqInfo() {
      this.$axios({
        url: "/getQverviewKqInfo",
        type: "post",
      }).then((res) => {
        this.kqInfoList = res.data;
        this.updateBasic++;
      });
    },
    getOverviewJcdInfo() {
      this.$axios({
        url: "/getOverviewJcdInfo",
        type: "post",
      }).then((res) => {
        this.jcdInfoList = res.data;
        this.updateBasic++;
      });
    },
    getOverviewEventInfo(val) {
      this.$axios({
        url: "/getOverviewEventInfo",
        type: "post",
        params:val
      }).then((res) => {
        this.jcEventList = res.data.jcEventList;
        this.totalLen = res.data.len
      });
    },
  },
};
</script>
<style scoped>
.button-style {
  width: 142px;
  height: 37px;
  line-height: 37px;
  border-radius: 4px;
  background-color: #f1f1f1;
  color: black;
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  border: 1px solid rgba(187, 187, 187, 1);
}
.date-style {
  color: black;
  font-size: 18px;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  margin-left: 231px;
}
</style>